<template>
    <el-dialog
      title="商品"
      :visible.sync="dialogTableVisible"
      @close="onClose"
    >
      <el-descriptions title="申请信息">
        <el-descriptions-item label="denom名称">{{itemInOf.denomName}}</el-descriptions-item>
        <el-descriptions-item label="DAW名称">{{itemInOf.dawName}}</el-descriptions-item>
        <el-descriptions-item label="DAW数量">{{itemInOf.nftNum}}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-form
          :inline="true"
          class="search-form"
          ref="test-form"
          label-width="auto"
          size="small"
          style="display: flex; justify-content: space-between"
        >
          <div class="input-row">
            <el-form-item label="选择状态:" class="search-form-item">
              <el-select v-model="value" placeholder="选择状态"  @change='queryCriteria'  >
                <el-option label="全部" value=""></el-option>
                <el-option label="未购买" value="0"></el-option>
                <el-option label="已购买" value="1"></el-option>
                <el-option label="已销毁" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>

      <el-table
      v-loading="loading"
      :data="dataList">
        <el-table-column
          property="date"
          label="tokenID"
          prop="dawId"
        ></el-table-column>
        <el-table-column
          property="name"
          label="状态"
          width="200"
        >
           <template scope="scope">
            <div v-if="scope.row.dawStatus == 0" style="color:#409EFF" >未购买</div>
            <div v-if="scope.row.dawStatus == 1" style="color:#F56C6C" >已购买</div>
            <div v-if="scope.row.dawStatus == 2" style="color:#67C23A">已销毁</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-dialog>
  </template>

  <script>
  export default {
    props:[
      'itemInOf'
    ],
    data() {
      return {
       loading:true,
        dialogTableVisible: false,
        dataList:[],
        //返回的参数
        value:"",
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条,
          denomName: "",
        },
      };
    },
    mounted() {

    },
    methods: {
      //选择
      queryCriteria (val) {
        this.getDataList(this.page);
      },

      getDataList(page) {
        this.pageLoading = true;
        this.$http({
          url: this.$http.adornUrl(
            `/admin/nftdaw/getpageDawInfo?dawNameId=${this.itemInOf.dawNameId}&pageNum=${this.page.currentPage}&pageSize=${this.page.pageSize}&dawStatus=${this.value}`
          ),
          method: "get",
        }).then(({ data }) => {
          this.dataList = data.data.list;
          this.page.total = data.data.total;
          this.loading = false;
        });
      },

      init() {
        this.dialogTableVisible = true;
        this.getDataList(this.page);
      },

      onClose() {
        this.dialogTableVisible = false;
      },
      //分页按钮
      handleSizeChange(val) {
        this.page.pageSize = val;
        // this.pageQuery.pageSize = val
        this.getDataList(this.page);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        // this.pageQuery.pageSize = val
        this.getDataList(this.page);
      },
    },
  };
  </script>
